import axios from 'axios'
import React from 'react'
import {
  Map,
  Marker,
  CityListControl,
  MapApiLoaderHOC,
  ZoomControl,
  NavigationControl
} from 'react-bmapgl'
import '../assets/scss/Shop.scss'
export default class Shop extends React.Component {
  state = {
    shopList: [],
    pos: {
      lng: 112.567227,
      lat: 37.865488
    }
  }
  componentDidMount() {
    axios.get('http://localhost:5000/data').then((res) => {
      this.setState({ shopList: res.data })
    })
  }
  changePos = (pos) => {
    const lng = pos.longitude
    const lat = pos.latitude
    this.setState({ pos: { lng, lat } })
  }
  render() {
    const { lng, lat } = this.state.pos

    return (
      <>
        <Map
          style={{ height: 350 }}
          // 在cra工程脚手架中 所有的类和对象都要基于window
          center={new window.BMapGL.Point(lng, lat)}
          zoom={16}
          // tilt={40}
          enableScrollWheelZoom={true}
        >
          <Marker position={new window.BMapGL.Point(lng, lat)} enableDragging />
          <CityListControl />
          <ZoomControl />
          <NavigationControl />
        </Map>
        {/* 门店列表 */}
        <div
          style={{ height: '-webkit-calc(100vh - 360px)', overflowY: 'scroll' }}
        >
          {this.state.shopList.map((item, index) => (
            <div
              key={item.id}
              className="shopList"
              onClick={() => this.changePos(item.coordinates)}
            >
              {index + 1}、{item.name}
            </div>
          ))}
        </div>
      </>
    )
  }
}
